import * as types from '../types'
import {
	getNewComp,
	getRandomId
} from '../functions'

const BASE_COMP_SUFFIX = 'Data'

const state = {
	lists: [],
	curCompId: null,
	isShow: false,
	maxIndex: 2,
	cropperImgUrl: null,
	imageSetUrls: [],
	vedioUrl: ''
}

const getters = {
	getComplistsByPageId: (state) => (pageId) => {
		return state.lists.filter((cp) => cp.parentId === pageId)
	},
	curComp: (state) => {
		return state.lists.find((cp) => cp.id === state.curCompId)
	},
	getCompConfigByCompid: (state) => (compid) => {
		return state.lists.find((cp) => cp.id === compid)
	},
	isShow: (state) => state.isShow,
	maxIndex: (state) => state.maxIndex,
	cropperImgUrl: (state) => state.cropperImgUrl,
	imageSetUrls: (state) => state.imageSetUrls,
	vedioUrl: (state) => state.vedioUrl
}

const actions = {
	// 添加新的组件
	addNewComp({
		commit,
		getters
	}, params) {
		const compData = getNewComp(params.name + BASE_COMP_SUFFIX)
		if (compData) {
			// 添加图片
			// 添加视频
			// 添加图集
			if (params.name === 'Image' || params.name === 'Imgset' || params.name === 'Vedio') {
				compData.props.src = params.src
				if (params.name === 'Imgset') {
					compData.props.animate = params.animate
					compData.props.animateDuration = params.animateDuration
					compData.props.animateDelay = params.animateDelay
				}
				if(params.name==='Vedio'){
					compData.position.t=compData.css.base.t
					compData.position.l=compData.css.base.l
					compData.position.w=compData.css.base.w
					compData.position.h=compData.css.base.h
					compData.position.br=compData.css.base.br
				}
			}
			// 添加文本或秀字体或添加按钮
			if (params.name === 'Text' || params.name === 'Font' || params.name === 'Button' || params.name === 'Input') {
				compData.props.text = params.text
				if (params.name === 'Input') {
					compData.css.bd.c = params.color
				}
			}
			// 互动的添加
			if (params.name === 'Interaction') {
				compData.props.text = params.content.name
				compData.props.url = params.content.url
				compData.props.type = params.content.type
				compData.css.bg.c = params.content.color
				if (params.content.iscustom) {
					compData.css.base.w = 115
					compData.css.base.h = 115
					compData.iscustom = true
				}
			}
			// 互动计数的添加
			if (params.name === 'Countnumber') {
				compData.props.color = params.content.color
				compData.props.size = params.content.size
				compData.props.layout = params.content.layout
				compData.props.url = params.content.url
				if (params.content.iscustom) {
					compData.css.base.w = 280
					compData.css.base.h = 115
					compData.iscustom = true
				}
			}
			const newCompData = Object.assign(compData, {
				parentId: getters.curPageId
			})
			// 将组件添加进页面
			commit('ADD_COMP_TO_PAGES', newCompData)
			// 将组件添加进组价容器
			commit('ADD_COMP', newCompData)
		}
	},
	// 添加新的form组件
	addNewFormComp({
		commit,
		getters
	}, params) {

		// const compData = getNewComp(params.name + BASE_COMP_SUFFIX)
		if (params && params.content && params.content.length > 0) {
			for (var i = 0; i < params.content.length; i++) {
				const compData = Object.assign(getNewComp(params.content[i].type + BASE_COMP_SUFFIX), {
					parentId: getters.curPageId
				})
				compData.id = compData.id.toString() + i
				compData.props.text = params.content[i].value
				compData.css.base.t = compData.css.base.t + i * 50
				// 将组件添加进页面
				commit('ADD_COMP_TO_PAGES', compData)
				// 将组件添加进组价容器
				commit('ADD_COMP', compData)
			}
		}
	},
	// 删除指定的dom
	delDom({
		commit,
		getters
	}, compId) {
		commit('DEL_DOM', compId)
		commit('DEL_DOM_TO_PAGES', compId)
	},
	// 设置索引
	setIndex({
		commit,
		getters
	}, resultArr) {
		const pageId = getters.curPageId
		commit('SET_INDEX', {
			result: resultArr,
			pageid: pageId
		})
	},

	// 测试模板的添加
	testTemplate({
		commit,
		getters
	}, compData) {
		if (compData && compData.length > 0) {
			var comps = []
			for (let item of compData) {
				comps.push(Object.assign(item, {
					parentId: getters.curPageId
				}))
			}
			commit('REPLACE_COMP_TO_PAGE', comps)
			commit('REPLACE_COMP', comps)
		}
	},
	// 测试整套模板页面的添加
	testTemPages({
		commit,
		getters
	}, compData) {
		if (compData) {
			commit('ADD_TEM_COMP_TO_PAGES', compData)
			commit('ADD_COMP', compData)
		}
	},

	// 设置添加图集时选中的图片
	setImagesets({
		commit,
		getters,
		dispatch
	}, imgUrls) {
		if (imgUrls) {
			commit('SET_IMAGESETS', imgUrls)
			commit('IMAGE_LIBRAY', {
				status: false,
				cropperImg: true,
				callback: (result) => {
					if (result && result.imgs.length) {
						var url = []
						for (let item in result.imgs) {
							url.push(result.imgs[item].value)
						}
						dispatch('addNewComp', {
							name: 'Imgset',
							src: url,
							animate: result.animation,
							animateDuration: result.animateDuration,
							animateDelay: result.animateDelay
						})
					}


				}
			})
		}
	}


}

const mutations = {
	// 点击是获取组件id
	[types.TOGGLE_COMP](state, id) {
		state.curCompId = id
	},
	// 编辑组件中的值
	[types.EDIT_COMP](state, {
		type,
		value,
		compid
	}) {
		const comp = state.lists.find((cp) => cp.id === compid || cp.id === state.curCompId)

		if (comp) {
			let compProp = comp[type]
			// 后期添加的代码，如有错误请修改此处
			if (typeof value !== 'object') {
				comp[type] = value
			} else {
				// 简单处理对象，默认为纯对象（没有数组等类型）
				for (let key in value) {
					if (compProp[key] === undefined) {
						continue
					}
					if (typeof value[key] === 'object') {
						Object.assign(compProp[key], value[key])
					} else {
						compProp[key] = value[key]
					}
				}
			}
		}
	},
	//新增一个组件
	[types.ADD_COMP](state, compData) {
		// 1. 新增组件时遍历所有的组件，将组件索引最大值赋值给新的组件
		if (state.lists.length > 0) {
			const curPage = state.lists.find((page) => page.parentId === compData.parentId)
			if (curPage) {
				var max_index = 0
				for (var i = 0; i < state.lists.length; i++) {
					if (max_index <= state.lists[i].css.z) {
						max_index = state.lists[i].css.z
					}
				}
				compData.css.z = max_index + 1
			}
		}
		state.lists.push(compData)
	},
	// 设置组件中的工具栏显示
	[types.SET_COMP_ISSHOW](state, status) {
		state.isShow = status
	},
	// 删除页面中的dom
	[types.DEL_DOM](state, compId) {
		var indexOf = -1;
		for (var i = 0; i < state.lists.length; i++) {
			if (state.lists[i].id == compId) {
				indexOf = i;
				break;
			}
		}
		if (indexOf != -1) {
			state.lists.splice(indexOf, 1)
		}
	},
	// 设置索引值
	[types.SET_INDEX](state, params) {
		var curPage = state.lists.filter(function(elem, index, arr) {
			return elem.parentId == params.pageid
		})
		if (curPage) {
			const add_index_compid = params.result[0].compid
			const index_compid = params.result[1].compid
			for (var i = 0; i < curPage.length; i++) {
				if (curPage[i].id == add_index_compid) {
					curPage[i].css.z = params.result[0].z_index
				}
				if (curPage[i].id == index_compid) {
					curPage[i].css.z = params.result[1].z_index
				}
			}
		}
	},
	// 设置裁剪图片的路径
	[types.CROPPER_IMGURL](state, imgUrl) {
		state.cropperImgUrl = imgUrl
	},
	// 设置图集选中的图片
	[types.SET_IMAGESETS](state, imgUrls) {
		state.imageSetUrls = imgUrls
	},
	// 图集中的图片更改
	[types.EDIT_IMGSET_URL](state, parmas) {
		state.lists.find((cp) => cp.id === parmas.compid || cp.id === state.curCompId).props.src = parmas.imgurls
		state.lists.find((cp) => cp.id === parmas.compid || cp.id === state.curCompId).props.animate = parmas.animate
		state.lists.find((cp) => cp.id === parmas.compid || cp.id === state.curCompId).props.animateDuration = parmas.animateDuration
		state.lists.find((cp) => cp.id === parmas.compid || cp.id === state.curCompId).props.animateDelay = parmas.animateDelay
	},
	// 设置vedio的路径
	[types.SET_VEDIO_URL](state, vedio_url) {
		state.vedioUrl = vedio_url
	},
	// 使用模板替换组件
	[types.REPLACE_COMP](state, compdata) {
		state.lists = []
		for (let item of compdata) {
			state.lists.push(item)
		}

	}
}

export default {
	state,
	getters,
	actions,
	mutations
}
